<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <!-- SEO Meta Tags-->
    <meta name="keywords" content="quicky, chat, messenger, conversation, social, communication" />
    <meta name="description" content="Quicky is a Bootstrap based modern and fully responsive Messaging template to help build Messaging or Chat application fast and easy." />
    <meta name="subject" content="communication">
    <meta name="copyright" content="frontendmatters">
    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
    <title>{:$configs['SYSTEM_NAME']}</title>
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="./../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./../favicon-16x16.png">
    <link rel="shortcut icon" href="./../favicon.ico" />
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="__STATIC__/index/webfonts/inter/inter.css"> 
    <link rel="stylesheet" href="__STATIC__/index/css/app.min.css">
</head>

<body class="authentication-page">

    <!-- Main Layout Start -->
    <div class="main-layout card-bg-1">
        <div class="container d-flex flex-column">
            <div class="row no-gutters text-center align-items-center justify-content-center min-vh-100">
                <div class="col-12 col-md-6 col-lg-5 col-xl-4">
                    <h1 class="font-weight-bold">绑定手机</h1>
                    <p class="text-dark mb-3">请输入Agent平台的手机号进行账号绑定.</p>
                    <form class="mb-3" method="POST" action="{:url('bind')}">
                        <div class="form-group">
                            <label for="mobile" class="sr-only">手机</label>
                            <input type="mobile" class="form-control form-control-md" id="mobile" name="mobile" placeholder="请输入手机">
                        </div>
                        <div class="row no-gutters">
                            <div class="form-group col-8">
                                <label for="verify" class="sr-only">验证码</label>
                                <input type="verify" class="form-control form-control-md" id="verify" name="verify" placeholder="请输入验证码">
                            </div>
                            <div class="col-4 text-right">
                                <button class="btn btn-info" type="button" style="height: 44px;width: 98%;" id="smsBtn" onclick="sendSms()">获取验证码</button>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-lg btn-block text-uppercase font-weight-semibold" type="submit">绑定</button>
                    </form>

                    <!-- <p>还没有账号？ <a class="font-weight-semibold" href="{:url('register')}">注册</a>.</p> -->
                </div>
            </div> 
        </div>
    </div>
    <!-- Main Layout End -->
  

    <!-- Javascript Files -->
    <script src="__STATIC__/index/vendors/jquery/jquery-3.5.0.min.js"></script>
    <script src="__STATIC__/index/vendors/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="__STATIC__/index/vendors/svg-inject/svg-inject.min.js"></script>
    <script src="__STATIC__/index/js/app.min.js"></script>
    <script type="text/javascript" src="__STATIC__/common/cch-util.js"></script>
    <script type="text/javascript">
        var cchint = null;
        function sendSms(){
            $.ajax({
                url:'{:url('getLoginSms')}',
                data:{mobile:$("#mobile").val()},
                type:'post',
                dataType:'json',
                success:function(data){
                    if (data.code == 1) {
                        $("#smsBtn").removeClass('btn-info');
                        $("#smsBtn").addClass('btn-secondary');
                        $("#smsBtn").html('60');
                        $("#smsBtn").attr('onclick','');
                        cchint = setInterval(function(){
                            var num = $("#smsBtn").html();
                            console.log(num);
                            num--;
                            if (num <= 0) {
                                $("#smsBtn").removeClass('btn-secondary');
                                $("#smsBtn").addClass('btn-info');
                                $("#smsBtn").html('获取验证码');
                                $("#smsBtn").attr('onclick','sendSms()');
                                clearInterval(cchint);
                            }else{
                                $("#smsBtn").html(num);
                            }
                        },1000);
                        cchUtil.message('验证码发送成功');
                    }else{
                        cchUtil.message(data.msg,'danger');
                    }
                }
            });
        }

    </script>
</body>

</html>